{% extends "base.html" %}

{% block title -%}
Wiki Editor
{%- endblock title %}

{% block content %}
<ul class="nav nav-tabs">
	<li class="active"><a href="#editor" data-toggle="tab">Editor</a></li>
	<li><a href="#preview" data-toggle="tab" id="previewlink">Preview</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="editor">
		<form method="post" class="form">
			{{ form.hidden_tag() }}
			{{ input(form.title, placeholder="Title", class="span7") }}
			{{ input(form.body, placeholder="Markdown", class="span7", rows="20") }}
			{{ input(form.tags, placeholder="Tags (comma separated)", class="span7") }}
			<div class="form-actions">
        <div class="pull-left">
          <a class="btn" href="#preview" id="previewbtn">Preview</a>
        </div>
				<div class="pull-right">
          <a class="btn" href="{{ url_for('display', url=page.url) }}">Cancel</a>
					<button class="btn btn-success" type="submit">Save</button>
				</div>
			</div>
		</form>
	</div>
	<div class="tab-pane" id="preview"></div>
</div>
{% endblock content %}
{% block sidebar %}

<h3><a href="/upload" target="_blank">Show all Uploads</a></h3>
<h3>Upload Resources</h3>
<p>You can upload image for markdown</p>
<form name="form" action="" method="POST" enctype="multipart/form-data"> 
      <p><input id="file" type="file" size="45" name="file" class="input" /></p>
      <h6>Please select a file and click Upload button</h6> 
      <p><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></p>
  </form>
  </br>
<h3>Upload list:</h3>
<pre id="uploadlist"></pre>

{% endblock sidebar %}
{% block postscripts -%}
{{ super() }}
$('#previewlink').on('click', function() {
	var $form = $('.form');
  var $inputs = $form.find('input, textarea, button');
  var $pre = $('#preview');
  var bodycontent = 'title: preview\n\n' + $form.find('textarea').val();
  $inputs.prop('disabled', true);
  $pre.removeClass('alert').removeClass('alert-error').html("Loading...");
  $.ajax({
    url: "{{ url_for('preview') }}",
    type: "POST",
    data: { body: bodycontent },
    success: function(msg) {
      $pre.html(msg);
      console.log(msg);
    },
    error: function() {
	$pre.addClass('alert').addClass('alert-error');
      $pre.html('There was a problem with the preview.');
    },
    complete: function() {
      $inputs.prop('disabled', false);
    }
  });
});
$('#previewbtn').on('click', function(event) {
	event.preventDefault();
	$('#previewlink').click();
});

function ajaxFileUpload(){
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });
        $.ajaxFileUpload({
            url:'/upload/',
            type:'post',
            secureuri:false,
            fileElementId:'file',
            dataType: 'json',
            success: function (data, status)
            {
                var file = $("#file") 
                file.after(file.clone().val(""));   
                file.remove(); 
                console.log(data);
                console.log(status);
                if(!data.error){
                    var list = $("#uploadlist");
                    var html = list.html() + data.filename + "'s url:\n" + data.url + "<hr style='border:1px dashed blue'/>";
                    list.html(html)
                }else{
                    alert("upload error.")
              }
            },
            error: function (data, status, e)
            {
                alert("upload error.")
            }
        })
        return false;
    } 
{%- endblock postscripts %}
